<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="./lib/vue.js"></script>
  </head>
  <body>
    <div id="app">

      <div>
        <label>Id:
          <input type="text" v-model="id">
        </label>

        <label>Name:
          <input type="text" v-model="name">
        </label>

        <input type="button" value="添加" @click="add">

      </div>
      <!-- v-for循环的时候,key属性只能使用 number获取string -->
      <!-- key在使用的时候,必须使用 v-bind 属性绑定的形式, 指定key的值 -->
      <!-- 必须使用 :key 值, 防止出现问题 -->
      <p v-for="item in list" :key="item.id">
        <input type="checkbox">
        {{item.id}}==={{item.name}}
      </p>
    </div>

    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          id: '',
          name: '',
          list: [
            {id:1, name:'张三', gender:'男'},
            {id:2, name:'李四', gender:'男'},
            {id:3, name:'王五', gender:'男'},
            {id:4, name:'赵六', gender:'男'},
            {id:5, name:'田七', gender:'男'}
          ]
        },
        methods: {
          add(){
            // unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
            this.list.unshift({id: this.id, name: this.name })
          }
        }
      })
    </script>



  </body>
</html>
